<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="https://cdn.staticfile.org/vue/2.4.2/vue.js"></script>
</head>

<body>
    <div id="app">
     <Ul>
         <li v-for='(name,index) in nana'>
            {{index}}------{{name}}
         </li>
     </Ul>
     <div>
         <button @click='push()'>push</button>
         <button @click='pop()'>pop()</button>
         <button @click=' unshift()'> unshift()</button>
         <button @click='splice()'>splice()</button>
         <button @click='sort()'>sort()</button>
         <button @click=' reverse()'> reverse()</button>
     </div>
     <ul>
         <li v-for='item in items'>
             {{item.massge}}
         </li>
     </ul>
    </div>
    
    <script>
        var vm=new Vue({
           el:'#app',
           data:{
               nana:{
                   姓名:'喻鹏程',
                   性别:'男',
                   年龄:102,
               },
               items:[
                   {massge:5},
                   {massge:2},
                   {massge:8},
               ],
               addValue:{massge:9},
               addSplice:{massge:'baibai'},

           },
           methods:{
               push(){
                   this.items.push(this.addValue)//末尾添加
               },
               pop(){
                   this.items.pop()//末尾删除
               },
               shift(){
                   this.items.shift()//开头添加
               },
               unshift(){
                   this.items.unshift(this.addValue)//开头删除
               },
              splice(){
                   this.items.splice(1,0,this.addSplice)//从第二个开始添加
               },
               sort(){
                   this.items.sort(function(a,b){
                       return a.massge<b.message;
                   });
               },
               reverse(){
                   this.items.reverse()//反转数组
               },
           }
        });
    </script>
</body>

</html>